<template>
  <div>
    <header>
      <h4>
        <van-icon @click="$router.push('/city')" name="arrow-left" />
        {{ city1 }}
      </h4>
      <van-row class="row">
        <van-col :span="8" @click="add"> 前一天 </van-col>
        <van-col :span="8">
          <el-date-picker
            v-model="date"
            type="date"
            placeholder="Pick a Date"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            :style="{ width: '150px' }"
          />
        </van-col>
        <van-col :span="8" @click="sub"> 后一天 </van-col>
      </van-row>
    </header>
    <dl v-for="v in list.values" :key="v.id">
      <dd class="con" @click="$router.push('/seat/' + v.id)">
        <van-row class="col">
          <van-col :span="8">
            {{ v.line }}
          </van-col>
          <van-col :span="8">
            {{ v.train }}
          </van-col>
          <van-col :span="8">
            {{ v.line1 }}
          </van-col>
        </van-row>
        <van-row>
          <van-col :span="8">
            {{ v.time }}
          </van-col>
          <van-col :span="8">
            {{ v.time.slice(0, 2) + "小时" + v.time.slice(3, 4) + "分" }}
          </van-col>
          <van-col :span="8">
            {{ v.time1 }}
          </van-col>
        </van-row>
      </dd>
      <dd>
        <h4>${{ v.price }}</h4>
      </dd>
      <dd class="con">
        <van-row class="cel">
          <van-col :span="8"> 一等有票</van-col>
          <van-col :span="8"> 二等有票</van-col>
          <van-col :span="8"> 商务 {{ v.car }} </van-col>
        </van-row>
      </dd>
    </dl>
  </div>
</template>

<script>
import { onMounted, reactive, ref } from "@vue/runtime-core";
import { HttpTicket } from "api";
import "vant/es/toast/style";
import Mock from "mockjs";
export default {
  data() {
    return { num: Mock.mock("@integer(10,60)") };
  },
  setup(props, context) {
    // 父组件传给子组件的 参数
    const { attrs, slots, emit } = context;
    const date = ref("2022-12-26");
    const PageCode = ref(8);
    const list = reactive({});
    const city1 = ref(JSON.parse(localStorage.getItem("city1")));
    async function getlist() {
      const form = {
        pageSize: 1,
        pageCode: 140,
        val: "",
        type: "全部",
        state: "全部",
        date: "",
      };
      const res = await HttpTicket({
        ...form,
      });
      list.values = res.data.data.slice(2, PageCode.value);
    }
    function add() {
      PageCode.value += 5;
      // ElMessage({ message: "添加内容",type:"success"  });
      // Toast("提示内容");
      console.log(PageCode.value);
      getlist();
    }
    function sub() {
      PageCode.value -= 5;
      console.log(PageCode.value);
      getlist();
    }
    onMounted(() => {
      getlist();
    });
    return {
      list,
      getlist,
      city1,
      date,
      PageCode,
      add,
      sub,
    };
  },
};
</script>
<style scoped  lang='scss' >
header {
  background-color: cadetblue;
  height: 130px;
  width: 100%;
  color: white;
  h4 {
    padding-left: 10px;
    font-size: 20px;
    line-height: 60px;
  }
  i {
    background-color: white;
    color: #000;
    border-radius: 50%;
    padding: 3px;
  }
}
.row {
  text-align: center;
  font-size: 20px;
  line-height: 50px;
}
.con {
  width: 83%;
  overflow: hidden;
  margin: 0px auto;
  line-height: 33px;
  .col {
    text-align: center;
    width: 86%;
    border-bottom: solid 1px #ccc;
  }
  .cel {
    color: gray;
  }
}

dl {
  border: solid 1px #ccc;
  padding: 10px;
  width: 90%;
  margin: 10px auto;
  border-radius: 10px;
  h4 {
    float: right;
    margin-top: -40px;
    font-size: 16px;
    color: orangered;
    font-weight: normal;
  }
}
</style>